<!-- 查看团队成员信息 -->
<template>
  <div>
    <a-drawer
      :title="$t('all.autotext52')"
      :visible="visible"
      :footer="null"
      width="1000"
      @close="handleCancel"
    >
      <a-skeleton :loading="loading" :active="true" :paragraph="{rows: 10}">
        <div class="edit-wrap">
          <div class="edit-btn">
            <a-space>
              <a-button
                type="primary"
                v-if="roleCode!=='PM' && roleCode!=='PROJECT_ADMIN' && isEdit"
                @click="groupEdit"
              >
                {{ $t('all.autotext919') }}
              </a-button>
            </a-space>
          </div>
          <a-descriptions :title="$t('all.autotext124')" bordered>
            <a-descriptions-item :label="$t('all.autotext374')">{{ roleName }}</a-descriptions-item>
            <a-descriptions-item :label="$t('all.autotext551')">{{ sysAdmin.account }}</a-descriptions-item>
            <a-descriptions-item :label="$t('all.autotext977')">{{ sysAdmin.name }}</a-descriptions-item>
            <a-descriptions-item :label="$t('all.autotext682')">{{ sysAdmin.phone }}</a-descriptions-item>
            <a-descriptions-item :label="$t('all.autotext44')">{{ sysAdmin.email }}</a-descriptions-item>
            <a-descriptions-item :label="$t('all.autotext1175')">{{ mainInfo.orgName }}</a-descriptions-item>
            <a-descriptions-item :label="$t('all.autotext902')">{{ sysAdmin.pinCode }}</a-descriptions-item>
            <a-descriptions-item :label="$t('all.autotext1054')">{{ researchName }}</a-descriptions-item>
          </a-descriptions>
        </div>
        <!-- 关联小程序 -->
        <div class="edit-wrap" v-if="roleCode==='Investigator'">
          <a-descriptions
            :title="$t('all.autotext1478')"
            bordered
            size="small"
            style="margin-top: 20px"
          >
            <a-descriptions-item :label="$t('all.autotext667')">
              {{ authStatus | enumValueByKey($const.PI_WX) }}
              <a-popconfirm
                :title="$t('all.autotext98')"
                :ok-text="$t('all.autotext792')"
                :cancel-text="$t('all.autotext975')"
                @confirm="actionCalcel()"
              >
                <a-button class="btn-border" size="small" v-if="authStatus == 4  && isEdit">{{ $t('all.autotext603') }}</a-button>
              </a-popconfirm>
              <a-popconfirm
                :title="authStatus === 2 ? $t('all.autotext906') : $t('all.autotext788')"
                @confirm="clickReinvite()"
              >
                <a-button
                  class="btn-border"
                  size="small"
                  style="margin-left: 10px"
                  v-if="(authStatus == 2 || authStatus == 4)  && isEdit"
                >
                  {{ authStatus === 2 ? $t('all.autotext1132') : $t('all.autotext362') }}
                </a-button>
              </a-popconfirm>
              <a-popconfirm
                :title="$t('all.autotext98')"
                :ok-text="$t('all.autotext792')"
                :cancel-text="$t('all.autotext975')"
                @confirm="actionCalcel()"
              >
                <a-button
                  class="btn-border"
                  size="small"
                  style="margin-left: 10px"
                  v-if="authStatus == 1&& isEdit"
                >
                  {{ $t('all.autotext1298') }}
                </a-button>
              </a-popconfirm>
            </a-descriptions-item>
          </a-descriptions>
        </div>
        <div v-if="authStatus == 3 && roleCode==='Investigator' && isEdit">
          <a-descriptions :title="$t('all.autotext685')" style="margin-top: 20px"></a-descriptions>
          <div>
            <div style="width:40%;margin-bottom:15px">
              <a-input
                v-model="refuseReason"
                type="textarea"
                :maxLength="80"
                :placeholder="$t('all.autotext607')"
              />
              <div style="text-align:right" >{{ refuseReason ? refuseReason.length : 0 }}/80</div>
            </div>
            <a-button type="primary" @click="agreement(1)" style="margin-right: 30px">{{ $t('all.autotext694') }}</a-button>
            <a-button type="danger" @click="agreement(2)">{{ $t('all.autotext1072') }}</a-button>
          </div>
        </div>
        <!-- 邀请记录 -->
        <RecordSteps v-if="invitedRecords.length" :title="$t('all.autotext780')" :data="invitedRecords"></RecordSteps>
      </a-skeleton>
    </a-drawer>
    <groupEditModal ref="groupRef" :researchIds="researchIds" @onSuccess="editSuccess"></groupEditModal>
  </div>
</template>

<script>
import groupEditModal from './groupEditModal.vue'
import { getMemberDetail, cancelInviteRes, anewInviteRes, updateCenterMember } from '@/api/overview/member'
import RecordSteps from '@comp/RecordSteps/index.vue'
import recordSteps from '@views/overview/detail/responsible/mixins/record-steps'
export default {
  mixins: [recordSteps],
  components: {
    groupEditModal,
    RecordSteps
  },
  data () {
    return {
      loading: false,
      id: '',
      visible: false,
      isEdit: false,
      authStatus: null, // 1：接受 2：待邀请 3：待处理 4：待加入
      roleCode: 'Investigator',
      researchName: '',
      researchIds: [],
      mainInfo: {},
      sysAdmin: {},
      roleName: '',
      refuseReason: ''
    }
  },
  methods: {
    open () {
      this.visible = true
    },
    getMemberDetail (val, flag) {
      this.id = val
      this.isEdit = flag
      this.loading = true
      this.getInvitedRecord('pi')
      getMemberDetail({ id: val })
        .then(res => {
          this.mainInfo = res
          this.sysAdmin = res.sysAdmin
          this.roleName = res.roleName
          this.roleCode = res.roleCode
          this.authStatus = res.authStatus
          this.researchName = res.proManageResearches ? res.proManageResearches.map(item => `${item.researchCenterNo} - ${item.orgName}`).join(', ') : ''
          this.researchIds = res.proManageResearches ? res.proManageResearches.map(item => item.id) : ''
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },
    // 点击取消对话框消失
    handleCancel () {
      this.$emit('refresh')
      this.refuseReason = ''
      this.visible = false
    },
    // 编辑
    groupEdit () {
      this.$refs.groupRef.open(this.id)
    },
    editSuccess () {
      this.getMemberDetail(this.id, true)
    },
    // 取消邀请/取消关联
    async actionCalcel () {
      await cancelInviteRes({ teamId: this.id })
      this.$message.success(this.$t('all.autotext470'))
      this.getMemberDetail(this.id, true)
    },
    // 邀请
    async clickReinvite () {
      await anewInviteRes({ teamId: this.id })
      this.$message.success(this.authStatus === 2 ? this.$t('all.autotext1511') : this.$t('all.autotext1205'))
      this.getMemberDetail(this.id, true)
    },
    // 小程序关联审批
    agreement (value) {
      if (value === 2 && !this.refuseReason) {
        this.$message.error(this.$t('all.autotext653'))
        return
      }
      this.spUpdatePtsAuth(value)
    },
    async spUpdatePtsAuth (value) {
      await updateCenterMember({
        teamId: this.id,
        authStatus: value,
        refuseReason: this.refuseReason
      })
      this.$message.success(this.$t('all.autotext654'))
      this.getMemberDetail(this.id, true)
    }
  }
}
</script>
<style scoped lang="less">
/deep/.ant-descriptions-title {
  padding-left: 20px;
  padding-top:4px;
  position: relative;
  &::before {
    content: '';
    display:block;
    width: 4px;
    height: 20px;
    background: #1890ff;
    position: absolute;
    left: 0;
    top: 6px;
  }
}
/deep/ .ant-descriptions-item-colon {
  width: 150px;
}

/deep/ .ant-descriptions-item-content {
  min-width: 150px;
}
.edit-wrap {
  position: relative;
}
.edit-btn {
  position: absolute;
  right: 0;
  z-index:100;
}
.btn-border {
  border: 1px solid #1890ff;
  color: #1890ff;
  font-size: 12px;
  margin-left: 6px;
}
</style>
